<template>
    <div class="home">
  <mt-swipe :auto="4000">
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/23/10/01cee7dc7265fc83a9512928248fa186de.jpg?imageView2/2/w/640/h/240/q/60"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img10.static.yhbimg.com/yhb-img01/2018/11/20/19/0169fc885b20629372e6661cd58722a1c5.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/013294704b35dbe873c78078d4f567acb1.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/018bfe2f7536b9aa364ff6b40abbc435f7.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/016156ca116247491e97e8541b8bc83d1b.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/01e723702056b0f10d04a7c70c4159c60f.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item> 
</mt-swipe>
<div class="nav">
  <dl>
    <dd>&#xe607;</dd>
    <dt>新品到着</dt>
  </dl>
  <dl>
    <dd class="er">&#xe626;</dd>
    <dt>人气搭配</dt>
  </dl>
  <dl>
    <dd>&#xe639;</dd>
    <dt>折扣专区</dt>
  </dl>
  <dl>
    <dd>&#xe60c;</dd>
    <dt>全部分类</dt>
  </dl>
</div>
<div class="banner"><img src="//img10.static.yhbimg.com/yhb-img01/2018/11/22/17/0163e6333c9b99e057ceede250ab4b5915.jpg?imageView2/3/w/640/h/200/q/60" alt="shibai"></div>
<div class="banner"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/21/16/01e899e851d2eab0f28950189979e213fe.jpg?imageView2/3/w/640/h/200/q/60" alt="shibai"></div>
<h1>热门品类</h1>
<main>
 <router-link :to="{name:'detail',params:{item}}" tag="div" v-for="(item, index) in list" :key="index"><img :src="'https://cdn.bestseller.com.cn'+item.picurls[3]" alt="qi"><p>{{item.goodsName}}</p></router-link>
</main>
<mt-swipe :auto="4000">
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/14/16/01ebcc0b17831461662df44ff3bd8b4f50.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/013294704b35dbe873c78078d4f567acb1.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
  <mt-swipe-item class="qi"><img src="//img11.static.yhbimg.com/yhb-img01/2018/11/22/17/018bfe2f7536b9aa364ff6b40abbc435f7.jpg?imageView2/2/w/640/h/240/q/60" alt="shibai"></mt-swipe-item>
</mt-swipe>
<h1>热门品牌</h1>
<div class="line">
<router-link :to="{name:'detail',params:{item}}" tag="div" v-for="(item, index) in list" :key="index"><img :src="'https://cdn.bestseller.com.cn'+item.picurls[2]" alt="qi"></router-link>  
</div>
<h1>人气推荐</h1>
<div class="banner"><img src="//img11.static.yhbimg.com/yhb-img01/2017/08/04/10/015f31dc40baa31dee9f602f1a84a6ae5f.jpg?imageView2/2/w/640/h/200/q/90" alt="shibai"></div>
<h1>你可能喜欢</h1>
<div class="problelylike">  
 <router-link :to="{name:'detail',params:{item}}" tag="div" v-for="(item, index) in list" :key="index"><img :src="'https://cdn.bestseller.com.cn'+item.picurls[number]" alt="没找到图片">
 <p>{{item.goodsName}}</p>
 <p>￥:{{item.price}}</p></router-link> 
</div>
</div>
</template>

<script>
import routes from './index.js'
export default {
  name: 'Home',
  data(){
    return {
      list:[],
      loading:false,
      number:null
    }
  },
  mounted(){
    const random=Math.random()*5
    this.number=random.toFixed(0)
  },  
  methods: {
  },
  created() {
  this.requst.get()
    .then(res=>{
      this.list=res
    })
    .catch(err=>{
      console.log(err)
    })
    .finally()
  }
}

</script>

<style lang="scss" scoped>
.home{
  background: #f0efeb;
 .mint-swipe{height: 180px;
 .is-active{background: white}
 .qi{text-align: center;line-height: 180px;font-size: 50px}
.qi:nth-child(1){background: red}
.qi:nth-child(2){background: yellow}
.qi:nth-child(3){background: blue}
.qi:nth-child(4){background: black;color: white}
 }}
 @font-face {
  font-family: 'iconfont';  /* project id 931805 */
  src: url('//at.alicdn.com/t/font_931805_zzz0nep5g8g.eot');
  src: url('//at.alicdn.com/t/font_931805_zzz0nep5g8g.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931805_zzz0nep5g8g.woff') format('woff'),
  url('//at.alicdn.com/t/font_931805_zzz0nep5g8g.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931805_zzz0nep5g8g.svg#iconfont') format('svg');
}
.nav{height: 90px;background: white;
justify-content: space-around;display: flex;align-items: center;
dd{border-radius: 50%;width: 40px;height: 40px;margin-bottom: 10px;font-family: "iconfont";border: 1px solid #ebebeb;text-align: center;line-height: 40px;font-size: 25px}
dd:hover{background: #b0b0b0}
dd:first-of-type{color: green}
dl:nth-of-type(2) dd{color: orange}
dl:nth-of-type(3) dd{color: red}
dl:nth-of-type(4) dd{color: blue}
dt{font-size: 12px;text-align: center}}
.banner{height: 120px;margin-top: 15px;img{width: 100%}}
h1{text-align: center;height: 50px;line-height: 50px}
main{margin-bottom: 15px;background: white;text-align: center;height: 308px;overflow: hidden;display: flex;flex-wrap: wrap;div{display: flex;align-items: center;justify-content: center;flex-direction: column;border: 1px solid #e1e1e1;width: 91.7px;height: 101px;img{display: block;width: 66px;height: 66px;}p{font-size: 12px}}}
.qi img{width: 100%}
.line{height: 190px;overflow: hidden;display: flex;flex-wrap: wrap;img{width: 93.5px;height: 95px;}}
.problelylike{
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  overflow: auto;
  justify-content: space-around;
  div{width: 160px;height: 325px;
    img{width: 160px}
    p{font-size: 12px;text-align: center;line-height: 30px}
  }
  }
</style>
